<template>
  <div id="levelsPage">
    <a-row
      :gutter="[16, 16]"
      v-loading="loading"
      element-loading-text="Loading..."
      element-loading-background="#fff"
    >
      <a-col :md="12" :xs="24">
        <a-card title="主线关卡">
          <template #extra>
            <div class="progress">
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="20"
                :percentage="(mainPassNum / mainLevelsTotal * 100).toFixed(2)"
                striped
                striped-flow
              />
              <el-statistic :value="mainPassNum">
                <template #suffix>{{ '/ ' + mainLevelsTotal }}</template>
              </el-statistic>
            </div>
          </template>
          <a-list item-layout="horizontal" :data-source="mainLevels">
            <template #renderItem="{ item: level, index }">
              <a-list-item>
                <a-list-item-meta :title="`${index + 1}、${level.title}`" />
                <el-rate
                  v-model="level.rate"
                  disabled
                  text-color="#ff9900"
                  style="margin-right:20px"
                />
                <el-button
                  :type="level.status === 1 ? 'success' : ''"
                  @click="toStudy(level.key)"
                  style="width: 65px"
                  >{{ level.status === 1 ? '已通关' :
                  '挑战' }}</el-button
                >
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-card title="自定义关卡">
          <template #extra>
            <div class="progress">
              <el-progress
                :text-inside="true"
                :show-text="false"
                :stroke-width="20"
                :percentage="(customPassNum / customLevelsTotal * 100).toFixed(2)"
                striped
                striped-flow
              />
              <el-statistic :value="customPassNum">
                <template #suffix>{{ '/ ' + customLevelsTotal }}</template>
              </el-statistic>
            </div>
          </template>
          <a-list item-layout="horizontal" :data-source="customLevels">
            <template #renderItem="{ item: level }">
              <a-list-item>
                <a-list-item-meta :title="level.title" />
                <el-rate
                  v-model="level.rate"
                  disabled
                  text-color="#ff9900"
                  style="margin-right:20px"
                />
                <el-button
                  :type="level.status === 1 ? 'success' : ''"
                  @click="toStudy(level.key)"
                  style="width: 65px"
                  >{{ level.status === 1 ? '已通关' :
                  '挑战' }}</el-button
                >
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
// import mainLevels from "@/levels/mainLevels";
// import customLevels from "@/levels/customLevels";
// import levels from '@/levels/levels'
import { getCurrentInstance, ComponentInternalInstance, onMounted, ref } from 'vue';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;

// let mainLevels = levels.mainLevels;
// let customLevels = levels.customLevels;
// let mainLevelsTotal = levels.mainLevelsTotal;
// let customLevelsTotal = levels.customLevelsTotal;
// let mainPassNum = levels.mainPassNum;
// let customPassNum = levels.customPassNum;

import sql from '@/levels/createTable.sql?raw'
interface LevelType {
  // 关卡唯一键，用于加载不同的关卡内容和初始化 db
  key: string;
  // 关卡标题
  title: string;
  // 内容
  content: string;
  // 初始化 SQL
  initSQL: string;
  // 输入框默认 SQL
  defaultSQL: string;
  // 提示
  hint?: string;
  // 答案 SQL
  answer: string;
  // 类型（主线或自定义）
  type: "main" | "custom";
}
let mainLevels = ref<LevelType[]>([])
let mainLevelsTotal = ref(0)
let mainPassNum = ref(0)
let customLevels = ref<LevelType[]>([])
let customLevelsTotal = ref(0)
let customPassNum = ref(0)
let levelList = []
// 自定义关卡sql
import sql1 from '@/levels/custom/大浪淘鸡/createTable.sql?raw'
import sql2 from '@/levels/custom/冒险者和金币/createTable.sql?raw'
import sql3 from '@/levels/custom/魔法学院/createTable.sql?raw'
let customSQL = [sql1, sql2, sql3]

const loading = ref(true);

onMounted(() => {
  getLevels();
})

function getLevels() {
  // 获取所有关卡
  proxy.$request.level
    .getAllLevel({ pageNum: 1, pageSize: 999999 })
    .then((res: any) => {
      levelList = res.data.list
      let mlevelNum = 1
      let cLevelNum = 1
      let customSQLNum = 0
      for (let i = 0; i < levelList.length; i++) {
        if (levelList[i].typeName === 'main') {
          mainLevels.value.push({
            id: levelList[i].id,
            key: 'mlevel' + mlevelNum++,
            title: levelList[i].title,
            initSQL: sql,
            content:
              '# ' +
              levelList[i].title +
              '\n## 教程\n' +
              levelList[i].tutorial +
              '\n## 示例\n' +
              levelList[i].example +
              '\n## 题目\n' +
              levelList[i].topic,
            defaultSQL: 'select * from student;',
            answer: levelList[i].rfanswer,
            hint: '请仔细查看本关给出的示例',
            type: levelList[i].typeName,
            rate: levelList[i].rate,
            status: levelList[i].status
          } as LevelType)
          if (levelList[i].status === 1) {
            ++mainPassNum.value
          }
        } else if (levelList[i].typeName === 'custom') {
          customLevels.value.push({
            id: levelList[i].id,
            key: 'clevel' + cLevelNum++,
            title: levelList[i].title,
            initSQL: customSQL[customSQLNum++],
            content:
              '# ' +
              levelList[i].title +
              '\n## 教程\n' +
              levelList[i].tutorial +
              '\n## 示例\n' +
              levelList[i].example +
              '\n## 题目\n' +
              levelList[i].topic,
            defaultSQL: 'select * from student;',
            answer: levelList[i].rfanswer,
            hint: '请仔细查看本关给出的示例',
            type: levelList[i].typeName,
            rate: levelList[i].rate,
            status: levelList[i].status
          } as LevelType)
          if (levelList[i].status === 1) {
            ++customPassNum.value
          }
        }
      }
      mainLevelsTotal.value = mainLevels.value.length
      customLevelsTotal.value = customLevels.value.length
      loading.value = false;
      console.log('mainLevels==>', mainLevels.value);

    })
}

function toStudy(level: any) {
  proxy.$storage.setItem('activeGameIndex', '1');
  proxy.$storage.setItem('activeLevel', level);
  proxy.$router.push(`/game/study/${level}`);
}
</script>

<style lang="scss" scoped>
.progress {
  width: 240px;

  .el-progress {
    float: left;
    width: 60%;
  }

  .el-statistic__content {
    float: right;
    width: 40%;
  }
}

:deep() {
  .ant-card-head-title {
    font-weight: 700;
    font-size: 20px;
  }

  .el-progress-bar__outer {
    margin-top: 5px;
  }
}
</style>
